<template>
  <el-table :data="tableData" style="width: 100%" max-height="600">
    <el-table-column prop="machineryId" label="machineryId"></el-table-column>
    <el-table-column prop="name" label="name"></el-table-column>
    <el-table-column prop="model" label="model"></el-table-column>
    <el-table-column prop="status" label="status"></el-table-column>
    <el-table-column fixed="right" label="Operations" width="220">
      <template #default="scope">
        <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.row.machineryId)"
        >
          Remove
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加项目按钮 -->
  <el-button class="mt-4" style="width: 100%" @click="openAddItemDialog">Add Item</el-button>

  <!-- 添加项目对话框 -->
  <el-dialog
      v-model="addItemDialogVisible"
      title="Add Item"
      append-to-body
      @close="resetAddItemForm"
  >
    <el-form :model="addItemForm" ref="addItemForm" :rules="addItemFormRules" label-width="120px">
      <el-form-item label="machineryId" prop="machineryId">
        <el-input  v-model="machineryId"></el-input>
      </el-form-item>
      <el-form-item label="name" prop="name">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="model" prop="model">
        <el-input v-model="model"></el-input>
      </el-form-item>
      <el-form-item label="status" prop="status">
        <el-input v-model="status"></el-input>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <div class="dialog-footer">
      <el-button @click="addItemDialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="addItem">Add</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {CamerasControllerService, MachineryControllerService, PersonnelControllerService} from "../../generated";
const machineryId=ref();
const name=ref();
const model=ref();
const status=ref();
interface ListItem {
  machineryId: string;
  model: string;
  name: string;
  status: string;
}
const deleteRow = (employeeId: string) => {
  // 根据员工 ID 删除行的逻辑
  MachineryControllerService.removeUsingPost1(employeeId).then(fetchData)
};
// 声明响应式引用
const tableData = ref<ListItem[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 添加项目对话框相关状态和方法
const addItemDialogVisible = ref(false);
const addItemForm = ref({
  machineryId: machineryId.value,
  model: model.value,
  name: name.value,
  status: status.value,

});
const addItemFormRules = ref({
  status: [{ required: true, message: 'Please enter employee ID', }],
  machineryId: [{ required: true, message: 'Please enter name',  }],
  model: [{ required: true, message: 'Please enter position',  }],
  name: [{ required: true, message: 'Please enter position',  }],
});
// 分页变化时的处理方法
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  fetchData();
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  fetchData();
};

// 获取数据的方法
const fetchData = () => {
  MachineryControllerService.listUsingPost1(currentPage.value, pageSize.value)
      .then(response => {
        const responseData = response.result;

        tableData.value = responseData.list
        console.log(tableData.value)
        total.value = response.total;
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
};

// 页面加载时获取第一页数据
fetchData();

// 打开添加项目对话框
const openAddItemDialog = () => {
  addItemDialogVisible.value = true;
};
// 添加项目
const addItem = () => {
  // 假设这里是发送请求将数据添加到后端的逻辑
  // 此处只是示例，实际情况需要根据你的业务需求来实现
  addItemForm.value = {
    machineryId: machineryId.value,
    model: model.value,
    name: name.value,
    status: status.value,
  };
  console.log('Adding item:', addItemForm.value);
  // 添加完毕后关闭对话框
  MachineryControllerService.addUsingPost1(addItemForm.value)
      .then(() => {
        fetchData(); // 添加后刷新数据
        addItemDialogVisible.value = false;
        resetAddItemForm()
      })
      .catch(error => {
        console.error('Error adding item:', error);
      });
};
// 重置添加项目表单
const resetAddItemForm = () => {
  // 重置表单数据
  addItemForm.value = {
    machineryId: '',
    name: '',
    status: '',
    model: '',
  };
};

</script>

<style scoped>
</style>
